<template>
  <div class="food-part">
    <!-- 标题区域 -->
    <div class="title-container">
      <div class="title">
        <h1>主题晚宴</h1>
        <p class="subtitle">精致美食，难忘体验</p>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div
          class="section"
          v-for="(dinner, index) in dinners"
          :key="index"
          :style="{ animationDelay: `${index * 0.1}s` }"
      >
        <div class="section-content">
          <div class="image-container">
            <img :src="dinner.image" :alt="dinner.title" class="dinner-image">
            <div class="image-overlay"></div>
          </div>
          <div class="text">
            <h2>{{ dinner.title }}</h2>
            <div class="divider"></div>
            <div class="info-item">
              <span class="info-icon">🍽️</span>
              <p>{{ dinner.features }}</p>
            </div>
            <div class="info-item">
              <span class="info-icon">🏆</span>
              <p>{{ dinner.case }}</p>
            </div>
            <div class="info-item">
              <span class="info-icon">👥</span>
              <p>{{ dinner.suitable }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import image1 from '../../../assets/24.jpg'
import image2 from '../../../assets/25.jpg'
import image3 from '../../../assets/26.jpg'
import image4 from '../../../assets/27.jpg'
import image5 from '../../../assets/28.jpg'
import image6 from '../../../assets/29.jpg'

export default {
  name: 'FoodPart',
  data() {
    return {
      dinners: [
        {
          title: '复古晚宴',
          image: image1,
          features: '复古装饰，经典音乐，带你回到优雅的旧时光。',
          case: '去年举办的复古晚宴吸引了众多复古爱好者，现场布置和音乐都得到了高度评价。',
          suitable: '喜欢复古文化和怀旧氛围的个人或团体。'
        },
        {
          title: '海滩派对',
          image: image2,
          features: '海滩环境，海鲜大餐，享受海风和日落的浪漫。',
          case: '在夏季海滩上举办的派对，参与者在享受美食的同时，还能欣赏美丽的海景。',
          suitable: '喜欢海滩和海鲜的个人或团体。'
        },
        {
          title: '森林晚宴',
          image: image3,
          features: '森林环境，自然美食，享受大自然的宁静。',
          case: '在森林中举办的晚宴，参与者在享受美食的同时，还能感受大自然的宁静。',
          suitable: '喜欢自然和户外活动的个人或团体。'
        },
        {
          title: '主题化装舞会',
          image: image4,
          features: '化装舞会，主题装饰，享受神秘和欢乐的夜晚。',
          case: '去年的万圣节化装舞会，参与者穿着各种服装，现场气氛热烈。',
          suitable: '喜欢派对和化装的个人或团体。'
        },
        {
          title: '星空晚宴',
          image: image5,
          features: '户外环境，星空下的美食，享受宁静的夜晚。',
          case: '在户外举办的星空晚宴，参与者在享受美食的同时，还能欣赏美丽的星空。',
          suitable: '喜欢户外活动和星空的个人或团体。'
        },
        {
          title: '文化美食节',
          image: image6,
          features: '不同文化的美食，体验世界各地的风味。',
          case: '举办的文化美食节，参与者品尝了来自世界各地的美食，反响热烈。',
          suitable: '喜欢尝试不同文化美食的个人或团体。'
        }
      ]
    };
  }
}
</script>

<style scoped>
.food-part {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
  padding: 40px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

/* 标题区域 */
.title-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.title {
  background-color: #FFFFFF;
  padding: 25px 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  width: fit-content;
  max-width: 80%;
  transform: translateY(-20px);
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-weight: 600;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin: 0;
  font-weight: 300;
}

/* 内容区域 */
.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  background-color: #FFFFFF;
  padding: 0;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.section-content {
  display: flex;
  height: 100%;
}

.image-container {
  position: relative;
  width: 45%;
  min-height: 250px;
  overflow: hidden;
}

.dinner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
}

.section:hover .dinner-image {
  transform: scale(1.05);
}

.text {
  padding: 25px;
  width: 55%;
}

.text h2 {
  font-size: 1.6rem;
  color: #e74c3c;
  margin: 0 0 15px 0;
  font-weight: 600;
}

.divider {
  height: 3px;
  width: 60px;
  background: linear-gradient(to right, #e74c3c, #e67e22);
  margin: 0 0 20px 0;
  border-radius: 3px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  align-items: flex-start;
}

.info-icon {
  font-size: 1.2rem;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.text p {
  line-height: 1.7;
  margin: 0;
  color: #555;
  font-size: 0.95rem;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .title {
    padding: 20px 30px;
  }

  h1 {
    font-size: 2.2rem;
  }

  .subtitle {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .content {
    grid-template-columns: 1fr;
  }

  .section-content {
    flex-direction: column;
  }

  .image-container {
    width: 100%;
    height: 250px;
  }

  .text {
    width: 100%;
    padding: 20px;
  }

  .title {
    max-width: 90%;
    padding: 20px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }

  .text h2 {
    font-size: 1.4rem;
  }

  .info-icon {
    font-size: 1rem;
  }

  .text p {
    font-size: 0.9rem;
  }
}
</style>